<template>
<!-- 导航栏 -->
  <div class="index">
    <ul>
      <li>
        <router-link to="/home">
          <img src="../assets/Music.png" alt="">
        </router-link>
      </li>
      <router-link tag='li' to="/artists">  
        歌手
      </router-link>
      <router-link tag='li' to="/listcate">
        榜单
      </router-link>
      <router-link tag='li' to="/ucenter">
        我的
      </router-link>
      <router-link tag='li' to="/search">
        搜索
      </router-link>
    </ul>
    <!-- 获取home视图 -->
    <router-view />
  </div>
</template>

<script>
  export default {
    name:'index',
    data(){
      return{

      }
    }
  }
</script>

<style scoped>

.active{
  color:blue
}

.index img{
  width: 30px;
  height: 30px;
  margin-top: 12.5px
}

.index ul {
  display: flex;
  height: 55px;
  line-height: 55px;
  background-color: #f9f9f9;
}

.index ul li{
  flex: 1;
  text-align: center;
  list-style: none
}

.index ul li a{
  font-size: 16px;
  color: #999999;
}

</style>